import React, { PureComponent } from 'react'
import swiperImg from '../../statics/swiper-1.jpg'
import 
{ 
  HomeWrapper,
  HomeLeft,
  HomeRight 
} from './style'
import Topic from './components/Topic'
import List from './components/List'
import Writer from './components/Writer'
import Recommend from './components/Recommend'
import { connect } from 'react-redux'
import { actionCreator } from './store'
import imgUrl1 from '../../statics/recommend/recommend-1.png'
import imgUrl2 from '../../statics/recommend/recommend-2.png'
import imgUrl3 from '../../statics/recommend/recommend-3.png'
import imgUrl4 from '../../statics/recommend/recommend-4.png'
import imgUrl5 from '../../statics/recommend/recommend-5.png'

class Home extends PureComponent{
  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img
            className='swiper-img' 
            src={swiperImg} 
            alt="加载中"
            onClick={this.click.bind(this)}
          />
          <Topic></Topic>
          <List></List>
        </HomeLeft>
        <HomeRight>
          <Recommend
            onRef={(ref) => { this.recommendRef = ref}}
          ></Recommend>
          <Writer
          ></Writer>
        </HomeRight>
      </HomeWrapper>
    )
  }
  componentDidMount(){
    this.props.getHomeList([imgUrl1, imgUrl2, imgUrl3, imgUrl4, imgUrl5]);
  }
  click(){
    this.recommendRef.handleClick();
  }
}

const mapStateToProps = (state) => {
  return {

  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getHomeList(imgList) {
      dispatch(actionCreator.getHomeList(imgList))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)